<template>
  <div class="container">
    <!-- <z-nav-bar backState='1000' type='transparent' :titleCenter='true' title=''></z-nav-bar> -->
    <!-- 公共组件-每个页面必须引入 -->
    <!-- <public-module></public-module> -->
    <div class="report-card">
      <h1 class="title">成绩单</h1>
      <div class="score-section">
        <!-- <h2>总分: {{ score }} 分</h2> -->
        <div class="score-details">
          <div class="detail" v-for="(value, label) in scoreDetails" :key="label">
            <span class="label">{{ label }}:</span>
            <span class="value">{{ value }}</span>
          </div>
        </div>
      </div>
      
      <!-- 错误题目详情区域 -->
      <div class="wrong-questions-section" v-if="wrongQuestions.length > 0">
        <h3 class="section-title">错误题目详情</h3>
        <div class="question-list">
		
          <div class="question-item" v-for="(question, index) in wrongQuestions" :key="index">
            <div class="question-header">
              <!-- <span class="question-number">第{{ question.other }}题</span> -->
              <span class="question-type">{{ question.content }}</span>
            </div>
            <div class="question-content">
              <p class="question-text">
				<view  v-if="question.isPublic == 1">基础信息题（不计分）</view>
				<view  v-if="question.isPublic == 0">考试题（计分）</view>
				<view  v-if="question.isPublic == 2">调查问卷题（不计分）</view>
			  </p>
              <div class="options" v-if="question.optionsVOS">
				
                <div class="option" v-for="(option, optIndex) in question.optionsVOS" :key="optIndex">
                  <span class="option-label">{{ option.number }}</span>
                  <span class="option-text">{{ option.content }}</span>
                </div>
              </div>
            </div>
            <div class="answer-section">
              <div class="answer-item">
                <span class="answer-label">你的答案:</span>
                <span class="user-answer wrong">{{ question.respondAnswers }}</span>
              </div>
              <div class="answer-item">
                <span class="answer-label">正确答案:</span>
                <span class="correct-answer">{{ question.correctAnswer }}</span>
              </div>
            </div>
           <!-- <div class="explanation" v-if="question.explanation">
              <span class="explanation-label">解析:</span>
              <p class="explanation-text">{{ question.explanation }}</p>
            </div> -->
          </div>
        </div>
      </div>
      
      <!-- <div class="feedback">
        <p>{{ feedback }}</p>
      </div> -->
      <button class="confirm-button" @click="goToNextPage">确定</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rightNum: 0,
      wrongNum: 0,
      score: 0,
      totalNum: 0,
      // 错误题目数据 - 假数据
      wrongQuestions: [
        {
          questionNumber: 1,
          type: "单选题",
          questionText: "下列哪个是JavaScript的基本数据类型？",
          options: [
            { label: "A", text: "Object" },
            { label: "B", text: "Array" },
            { label: "C", text: "String" },
            { label: "D", text: "Function" }
          ],
          userAnswer: "A",
          correctAnswer: "C",
          explanation: "1"
        },
        {
          questionNumber: 3,
          type: "多选题",
          questionText: "以下哪些是HTML5的新特性？",
          options: [
            { label: "A", text: "Canvas" },
            { label: "B", text: "WebSocket" },
            { label: "C", text: "LocalStorage" },
            { label: "D", text: "Flash" }
          ],
          userAnswer: "A,C",
          correctAnswer: "A,B,C",
          explanation: "2"
        }
      ]
    };
  },
  onLoad(data) {
    const datas = JSON.parse(data.res);
    this.rightNum = datas.rightNum;
    this.wrongNum = datas.wrongNum;
    this.score = datas.score;
    this.totalNum = datas.totalNum;
    
    // 这里可以接收后端返回的错误题目数据
    this.wrongQuestions = datas.wrongQuestions || [];
  },
  computed: {
    accuracy() {
      return ((this.rightNum / this.totalNum) * 100).toFixed(2); // 计算正确率，保留两位小数
    },
    feedback() {
      if (this.score >= 90) {
        return "优秀！继续保持！";
      } else if (this.score >= 75) {
        return "不错！再接再厉！";
      } else if (this.score >= 50) {
        return "及格，但还有提升空间！";
      } else {
        return "努力学习，争取下次进步！";
      }
    },
    scoreDetails() {
      return {
        "正确率": `${this.accuracy}%`,
        "正确题目": this.rightNum,
        "错误题目": this.wrongNum,
        "总题数": this.totalNum,
      };
    },
  },
  methods: {
    goToNextPage() {
      uni.reLaunch({
          url: '/pages/dati/index'
      });
    },
  },
};
</script>

<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f0f4f8;
  padding: 20px 0;
}

.report-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  padding: 30px;
  width: 90%;
  max-width: 400px;
  text-align: center;
}

.title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #333;
}

.score-section {
  margin-bottom: 20px;
}

.score-details {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.detail {
  margin: 5px 0;
  font-size: 16px;
}

.label {
  font-weight: bold;
  color: #666;
}

.value {
  color: #333;
  font-weight: 600;
}

/* 错误题目详情样式 */
.wrong-questions-section {
  margin-top: 25px;
  text-align: left;
}

.section-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 15px;
  text-align: center;
  border-bottom: 2px solid #007aff;
  padding-bottom: 8px;
}

.question-list {
  max-height: 400px;
  overflow-y: auto;
}

.question-item {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 15px;
  border-left: 4px solid #dc3545;
}

.question-header {
  display: flex;
  /* justify-content: space-between; */
  align-items: center;
  margin-bottom: 10px;
  width:100%
}

.question-number {
	 width:20%;
  font-weight: bold;
  color: #333;
  font-size: 16px;
}

.question-type {
	width:80%;
	text-align: left;
  /* background: #dc3545; */
  color: #000;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 18px;
}

.question-content {
  margin-bottom: 12px;
}

.question-text {
  font-size: 14px;
  color: #333;
  line-height: 1.5;
  margin-bottom: 8px;
}

.options {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.option {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.option-label {
  background: #e9ecef;
  color: #495057;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 12px;
}

.option-text {
  color: #495057;
}

.answer-section {
  margin-bottom: 10px;
}

.answer-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
  font-size: 13px;
}

.answer-label {
  font-weight: bold;
  color: #666;
  min-width: 70px;
}

.user-answer {
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: bold;
}

.user-answer.wrong {
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

.correct-answer {
  background: #d4edda;
  color: #155724;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: bold;
  border: 1px solid #c3e6cb;
}

.explanation {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #dee2e6;
}

.explanation-label {
  font-weight: bold;
  color: #666;
  font-size: 13px;
  display: block;
  margin-bottom: 5px;
}

.explanation-text {
  font-size: 12px;
  color: #666;
  line-height: 1.4;
  margin: 0;
  background: #fff3cd;
  padding: 8px;
  border-radius: 4px;
  border-left: 3px solid #ffc107;
}

.feedback {
  font-size: 18px;
  color: #555;
}

.confirm-button {
  background-color: #007aff;
  color: white;
  border: none;
  border-radius: 5px;
  padding: 0px 30px;
  font-size: 16px;
  cursor: pointer;
  margin-top: 20px;
  width: 100%;
}

.confirm-button:hover {
  background-color: #005bb5;
}
</style>
